<template>
    <div class="app">
      <div class="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item to="/">Home</el-breadcrumb-item>
          <el-breadcrumb-item>Doctor Page</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="user-info">
          <el-icon @click="goToMessages" class="icon-button"><ChatLineRound/></el-icon>
            <span>消息</span>
          <el-icon @click="showUserProfile" class="icon-button"><User /></el-icon>
            <span>尊敬的{{ this.userName }}，您好！</span>
          <el-icon @click="logout" class="icon-button"><TopRight /></el-icon>
            <span>登出</span>
        </div>
      </div>
      <div class="content">
        <div class="sidebar">
          <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
          >
            <el-menu-item index="1">
              <router-link to="/doctor/book" class="nav-link">
                <el-icon><Calendar /></el-icon>
                <span>预约管理</span>
              </router-link>
            </el-menu-item>
            <el-menu-item index="2">
              <router-link to="/doctor/bookcal" class="nav-link">
                <el-icon><Calendar /></el-icon>
                <span>预约日历</span>
              </router-link>
            </el-menu-item>
            <el-menu-item index="3">
              <router-link to="/doctor/patientManage" class="nav-link">
                <el-icon><Calendar /></el-icon>
                <span>病患管理</span>
              </router-link>
            </el-menu-item>
            <el-menu-item index="4">
              <router-link to="/doctor/diagnosis" class="nav-link">
                <el-icon><Calendar /></el-icon>
                <span>诊断管理</span>
              </router-link>
            </el-menu-item>
            <el-menu-item index="5">
              <router-link to="/doctor/bill" class="nav-link">
                <el-icon><Calendar /></el-icon>
                <span>账单</span>
              </router-link>
            </el-menu-item>
            <el-menu-item index="6">
              <router-link to="/doctor/judgement" class="nav-link">
                <el-icon><Calendar /></el-icon>
                <span>评价</span>
              </router-link>
            </el-menu-item>
            <el-menu-item index="7">
              <router-link to="/doctor/doctorMessage" class="nav-link">
                <el-icon><Calendar /></el-icon>
                <span>消息</span>
              </router-link>
            </el-menu-item>
            <el-menu-item index="8">
              <router-link to="/doctor/DoctorNotification" class="nav-link">
                <el-icon><Calendar /></el-icon>
                <span>通知</span>
              </router-link>
            </el-menu-item>
            
          </el-menu>
        </div>
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </div>
    </div>
  </template>
  
  <script>
  import {ElMessage} from "element-plus";
  import {ChatLineRound} from "@element-plus/icons-vue";

  export default {
    name: 'DoctorPage',
    components: {ChatLineRound},
    data() {
      return {
        userName: this.$store.state.userName
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      goToMessages() {
        this.$router.push('/patient/message');
      },
      showUserProfile() {
        this.$router.push('/patient/profile');
      },
      logout() {
        // 处理登出逻辑
        this.$store.commit('SET_ROLE', '');
        this.$router.push('/');
        ElMessage.success('登出成功！');
        console.log('User logged out');
      }
    }
  }
  </script>
  
  <style scoped>
  .app {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #9ecffd;
  }

  .user-info {
    display: flex;
    align-items: center;
  }

  .icon-button {
    cursor: pointer;
    margin-left: 15px;
  }

  .content {
    display: flex;
    flex: 1;
    height: 100%;
  }

  .main {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
  }

  el-main {
    height: 100%;
  }
  </style>
  